<%--
  Created by IntelliJ IDEA.
  User: chenhao
  Date: 2020/12/22
  Time: 9:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" href="http://hot.crawler.ckcest.cn/favicon.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="./科学热点_files/font_1234135_iimjqrkh26b.css">
<%--    <link rel="manifest" href="http://hot.crawler.ckcest.cn/manifest.json">--%>
    <title>科学热点</title>
    <link href="./科学热点_files/2.4d4260b6.chunk.css" rel="stylesheet">
    <link href="./科学热点_files/main.028d5d74.chunk.css" rel="stylesheet">
    <link href="./layui/css/layui.css" rel="stylesheet">
    <script src="./js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="./layui/layui.js" type="text/javascript"></script>
    <script  src="./echarts-4.0/echarts.min.js"></script>
    <script type="text/javascript">
        var datelist=[];
        var mode = "medical";
        var datevalue = 29;
        var sliderobj;
        $(function () {
            get_timeline();
            console.log(datelist)

            $("#timelabel1").html(rendTimeLabel(datevalue));
            $("#timelabel2").html(rendTimeLabel(datevalue));
            $("#timelabel3").html(rendTimeLabel(datevalue));
            $("#dt4").html(getTimeLable(4));
            $("#dt9").html(getTimeLable(9));
            $("#dt14").html(getTimeLable(14));
            $("#dt19").html(getTimeLable(19));
            $("#dt24").html(getTimeLable(24));
            $("#dt29").html(getTimeLable(29));

            var idx = 29 - datevalue;
            bindEvents();
            rendReDianPaiHang(mode,idx);
            rendReDianXinWen(mode, idx);
            rendPatentList(mode,idx);
            rendArticleList(mode,idx);
            rendRiverGraph(mode);
            rendtupu(mode,idx);
        });
        function get_timeline(){
            $.ajax({
                url: 'hot.crawler.v2/hot.crawler/get_timeline_nodes.json',
                async: false,
                type: 'GET',
                success: function (res) {
                    console.log(res)
                    // console.log(typeof (res))
                    datelist = res.data;
                    console.log(datelist)

                }
            });
            if (datelist.length ==0)
            {
console.log("为获取到数据")
            }
            console.log(typeof(datelist))
            for (var i = 0; i < datelist.length; i++) {
                console.log(datelist[i])
            }
            return datelist;
        }
        function bindEvents() {
            layui.use('slider', function(){
                var $ = layui.$
                    ,slider = layui.slider;



                        sliderobj = slider.render({
                            elem: '#slide'
                            , min: 0 //最小值
                            , max: 29 //最大值
                            , step: 1 //步长
                            , showstep: true //开启间隔点
                            , setTips: function (value) { //自定义提示文本
                                console.log(datelist)
                                console.log(29 - value)
                                console.log(datelist[29 - value])
                                return datelist[29 - value]

                                // if (value == 0) {
                                //     return '2020-04-13';
                                // } else if (value == 1) {
                                //     return '2020-04-20';
                                // } else if (value == 2) {
                                //     return '2020-04-27';
                                // } else if (value == 3) {
                                //     return '2020-05-04';
                                // } else if (value == 4) {
                                //     return '2020-05-11';
                                // } else if (value == 5) {
                                //     return '2020-05-18';
                                // } else if (value == 6) {
                                //     return '2020-05-25';
                                // } else if (value == 7) {
                                //     return '2020-06-01';
                                // } else if (value == 8) {
                                //     return '2020-06-08';
                                // } else if (value == 9) {
                                //     return '2020-06-15';
                                // } else if (value == 10) {
                                //     return '2020-06-22';
                                // } else if (value == 11) {
                                //     return '2020-06-29';
                                // } else if (value == 12) {
                                //     return '2020-07-06';
                                // } else if (value == 13) {
                                //     return '2020-07-13';
                                // } else if (value == 14) {
                                //     return '2020-07-20';
                                // } else if (value == 15) {
                                //     return '2020-07-27';
                                // } else if (value == 16) {
                                //     return '2020-08-03';
                                // } else if (value == 17) {
                                //     return '2020-08-10';
                                // } else if (value == 18) {
                                //     return '2020-08-17';
                                // } else if (value == 19) {
                                //     return '2020-08-24';
                                // } else if (value == 20) {
                                //     return '2020-08-31';
                                // } else if (value == 21) {
                                //     return '2020-09-07';
                                // } else if (value == 22) {
                                //     return '2020-09-14';
                                // } else if (value == 23) {
                                //     return '2020-09-21';
                                // } else if (value == 24) {
                                //     return '2020-09-28';
                                // } else if (value == 25) {
                                //     return '2020-10-05';
                                // } else if (value == 26) {
                                //     return '2020-10-12';
                                // } else if (value == 27) {
                                //     return '2020-10-19';
                                // } else if (value == 28) {
                                //     return '2020-10-26';
                                // } else if (value == 29) {
                                //     return '2020-11-02';
                                // }

                            }
                            , theme: '#f2bb39'
                            , value: 29
                            , change: function (value) {
                                console.log(value);
                                datevalue = value;
                                //渲染时间标签
                                $("#timelabel1").html(rendTimeLabel(value));
                                $("#timelabel2").html(rendTimeLabel(value));
                                $("#timelabel3").html(rendTimeLabel(value));

                                var idx = 29 - datevalue;

                                //渲染热点排行
                                rendReDianPaiHang(mode, idx);
                                rendReDianXinWen(mode, idx);
                                rendPatentList(mode, idx);
                                rendArticleList(mode, idx);
                                rendtupu(mode, idx);
                            }
                        });
                  });

            $(".help_icon").mouseover(function () {
                $(".help_text").show();
            });
            $(".help_icon").mouseout(function () {
                $(".help_text").hide();
            });
            $("#medcial-btn").click(function () {
                if(mode != "medical"){
                    mode = "medical";
                    $(".searchType").removeClass("searchTypeBorder");
                    $("#medcial-btn").addClass("searchTypeBorder");
                    $("#relatedtext").html("医药");
                    rendRiverGraph("medical");
                    rendtupu("medical",0);
                    sliderobj.setValue(29);
                }
            })
            $("#enviroment-btn").click(function () {
                if(mode != "enviroment"){
                    mode = "enviroment";
                    $(".searchType").removeClass("searchTypeBorder");
                    $("#enviroment-btn").addClass("searchTypeBorder");
                    $("#relatedtext").html("环境");
                    rendRiverGraph("enviroment");
                    rendtupu("enviroment",0);
                    sliderobj.setValue(29);
                }
            })
            $("#ai-btn").click(function () {
                if(mode != "ai"){
                    mode = "ai";
                    $(".searchType").removeClass("searchTypeBorder");
                    $("#ai-btn").addClass("searchTypeBorder");
                    $("#relatedtext").html("人工智能");
                    rendRiverGraph("ai");
                    rendtupu("ai",0);
                    sliderobj.setValue(29);
                }
            })
            $("#resource-btn").click(function () {
                if(mode != "resource"){
                    mode = "resource";
                    $(".searchType").removeClass("searchTypeBorder");
                    $("#resource-btn").addClass("searchTypeBorder");
                    $("#relatedtext").html("能源");
                    rendRiverGraph("resource");
                    rendtupu("resource",0);
                    sliderobj.setValue(29);
                }
            })
            $("#im-btn").click(function () {
                if(mode != "im"){
                    mode = "im";
                    $(".searchType").removeClass("searchTypeBorder");
                    $("#im-btn").addClass("searchTypeBorder");
                    $("#relatedtext").html("智能制造");
                    rendRiverGraph("im");
                    rendtupu("im",0);
                    sliderobj.setValue(29);
                }
            })
            $("#obor-btn").click(function () {
                if(mode != "obor"){
                    mode = "obor";
                    $(".searchType").removeClass("searchTypeBorder");
                    $("#obor-btn").addClass("searchTypeBorder");
                    $("#relatedtext").html("一带一路");
                    rendRiverGraph("obor");
                    rendtupu("obor",0);
                    sliderobj.setValue(29);
                }
            })
            $("#it-btn").click(function () {
                if(mode != "it"){
                    mode = "it";
                    $(".searchType").removeClass("searchTypeBorder");
                    $("#it-btn").addClass("searchTypeBorder");
                    $("#relatedtext").html("信息技术");
                    rendRiverGraph("it");
                    rendtupu("it",0);
                    sliderobj.setValue(29);
                }
            })
            $("#sb-btn").click(function () {
                if(mode != "sb"){
                    mode = "sb";
                    $(".searchType").removeClass("searchTypeBorder");
                    $("#sb-btn").addClass("searchTypeBorder");
                    $("#relatedtext").html("科技前沿");
                    rendRiverGraph("sb");
                    rendtupu("sb",0);
                    sliderobj.setValue(29);
                }
            })
        }
        function getTimeLable(value)
        {
            return datelist[29 - value]
        }
        function rendTimeLabel(value) {
            if (value <= 29) {
                var date1 = datelist[29 - value + 1]
                var date2 = datelist[29 - value]
                return date1 + " 至 " + date2;
            }
            // if(value==0){
            //     return '2020-04-13 至 2020-04-20';
            // }else if(value==1){
            //     return '2020-04-20 至 2020-04-27';
            // }else if(value==2){
            //     return '2020-04-27 至 2020-05-04';
            // }else if(value==3){
            //     return '2020-05-04 至 2020-05-11';
            // }else if(value==4){
            //     return '2020-05-11 至 2020-05-18';
            // }else if(value==5){
            //     return '2020-05-18 至 2020-05-25';
            // }else if(value==6){
            //     return '2020-05-25 至 2020-06-01';
            // }else if(value==7){
            //     return '2020-06-01 至 2020-06-08';
            // }else if(value==8){
            //     return '2020-06-08 至 2020-06-15';
            // }else if(value==9){
            //     return '2020-06-15 至 2020-06-22';
            // }else if(value==10){
            //     return '2020-06-22 至 2020-06-29';
            // }else if(value==11){
            //     return '2020-06-29 至 2020-07-06';
            // }else if(value==12){
            //     return '2020-07-06 至 2020-07-13';
            // }else if(value==13){
            //     return '2020-07-13 至 2020-07-20';
            // }else if(value==14){
            //     return '2020-07-20 至 2020-07-27';
            // }else if(value==15){
            //     return '2020-07-27 至 2020-08-03';
            // }else if(value==16){
            //     return '2020-08-03 至 2020-08-10';
            // }else if(value==17){
            //     return '2020-08-10 至 2020-08-17';
            // }else if(value==18){
            //     return '2020-08-17 至 2020-08-24';
            // }else if(value==19){
            //     return '2020-08-24 至 2020-08-31';
            // }else if(value==20){
            //     return '2020-08-31 至 2020-09-07';
            // }else if(value==21){
            //     return '2020-09-07 至 2020-09-14';
            // }else if(value==22){
            //     return '2020-09-14 至 2020-09-21';
            // }else if(value==23){
            //     return '2020-09-21 至 2020-09-28';
            // }else if(value==24){
            //     return '2020-09-28 至 2020-10-05';
            // }else if(value==25){
            //     return '2020-10-05 至 2020-10-12';
            // }else if(value==26){
            //     return '2020-10-12 至 2020-10-19';
            // }else if(value==27){
            //     return '2020-10-19 至 2020-10-26';
            // }else if(value==28){
            //     return '2020-10-26 至 2020-11-02';
            // }else if(value==29){
            //     return '2020-11-02 至 2020-11-09';
            // }
        }
        function rendReDianPaiHang(mode,value) {

            $("#redianpaihang").html("");
            $.ajax({
                url: 'hot.crawler.v2/hot.crawler/'+mode+'/get_timeline_data_'+ value+'.json',
                async: false,
                type: 'GET',
                success: function (res) {
                    var dataobj = res.data.reverse();
                    if(dataobj.length>0){
                        for(var i = 0;i<dataobj.length&&i<10;i++){
                            var no = i+1;
                            var wid = (dataobj[i][0]*100).toFixed(1);
                            $("#redianpaihang").append('<tr>\n' +
                                '                                        <td>'+no+'</td>\n' +
                                '                                        <td title="'+dataobj[i][1]+'">'+dataobj[i][1]+'</td>\n' +
                                '                                        <td>\n' +
                                '                                            <div class="ant-progress ant-progress-line ant-progress-status-success ant-progress-default">\n' +
                                '                                                <div>\n' +
                                '                                                    <div class="ant-progress-outer">\n' +
                                '                                                        <div class="ant-progress-inner">\n' +
                                '                                                            <div class="ant-progress-bg"\n' +
                                '                                                                 style="width: '+wid+'%; height: 8px; background: rgb(110, 135, 215);"></div>\n' +
                                '                                                        </div>\n' +
                                '                                                    </div>\n' +
                                '                                                </div>\n' +
                                '                                            </div>\n' +
                                '                                        </td>\n' +
                                '                                    </tr>')
                        }
                    }
                }
            });
        }
        function rendReDianXinWen(mode,value) {
            $("#redianxinwen").html("");
            $.ajax({
                url: 'hot.crawler.v2/hot.crawler/'+mode+'/get_timeline_news_' + value + '.json',
                async: false,
                type: 'GET',
                success: function (res) {
                    var dataobj = res.news;
                    if(dataobj.length>0){
                        for(var i = 0;i<dataobj.length&&i<10;i++){
                            var no = i+1;
                            $("#redianxinwen").append('<tr>\n' +
                                '                                        <td class="thW2-1">'+no+'</td>\n' +
                                '                                        <td class="overflow thW2-2" title="'+dataobj[i][0]+'"><a href="'+dataobj[i][2]+'" target="_blank"><span class="hoveFont">'+dataobj[i][0]+'</span></a>\n' +
                                '                                        </td>\n' +
                                '                                        <td class="overflow thW2-3" title="'+dataobj[i][1]+'">'+dataobj[i][1]+'</td>\n' +
                                '                                        <td class="overflow">'+dataobj[i][3]+'</td>\n' +
                                '                                    </tr>')

                        }
                    }
                }
            });
        }
        function rendPatentList(mode,value) {
            $("#patentList").html("");
            $("#expertList").html("");
            $.ajax({
                url: 'hot.crawler.v2/hot.crawler/'+mode+'/get_related_patent_expert_' + value + '.json',
                async: false,
                type: 'GET',
                success: function (res) {
                    console.log(res);
                    var dataobj = res.patents;
                    if(dataobj.length>0){
                        for(var i = 0;i<dataobj.length&&i<10;i++){
                            var no = i+1;
                            $("#patentList").append('<div class="listItem">\n' +
                                '                                    <li>\n' +
                                '                                        <a href="'+dataobj[i].url+'"\n' +
                                '                                           target="_blank" rel="noopener noreferrer">'+dataobj[i].name+'</a></li>\n' +
                                '                                    <div>'+dataobj[i].publish_date+'</div>\n' +
                                '                                </div>')

                        }
                    }

                    var expertobj = res.experts;
                    if(expertobj.length>0){
                        for(var i = 0;i<expertobj.length&&i<10;i++){
                            var no = i+1;
                            if(i==0||i==1){
                                $("#expertList").append('<div class="person flex"><img\n' +
                                    '                                        src="data:image/jpeg;base64,'+expertobj[i].imgurl+'"\n' +
                                    '                                        alt="'+expertobj[i].name+'">\n' +
                                    '                                    <div class="personDetail">\n' +
                                    '                                        <div class="name">'+expertobj[i].name+'</div>\n' +
                                    '                                        <div class="info2"></div>\n' +
                                    '                                        <div class="detail"><a href="'+expertobj[i].url+'"\n' +
                                    '                                                               target="_blank" rel="noopener noreferrer">详情</a></div>\n' +
                                    '                                    </div>\n' +
                                    '                                </div>')
                            }else{
                                $("#expertList").append('<div class="person person2">\n' +
                                    '                                    <div class="name">'+expertobj[i].name+'</div>\n' +
                                    '                                    <div class="info">'+expertobj[i].brief_info+'</div>\n' +
                                    '                                    <div class="detail"><a href="'+expertobj[i].url+'"\n' +
                                    '                                                           target="_blank" rel="noopener noreferrer">详情</a></div>\n' +
                                    '                                </div>')
                            }
                        }
                    }
                }
            });
        }
        function rendArticleList(mode,value) {
            $("#articleList").html("");
            $.ajax({
                url: 'hot.crawler.v2/hot.crawler/'+mode+'/get_timeline_related_article_' + value + '.json',
                async: false,
                type: 'GET',
                success: function (res) {
                    var dataobj = res.articles;
                    if(dataobj.length>0){
                        for(var i = 0;i<dataobj.length&&i<10;i++){
                            var no = i+1;
                            $("#articleList").append('<div class="thesisBox">\n' +
                                '                                <div class="firstRow">\n' +
                                '                                    <li>\n' +
                                '                                        <a href="'+dataobj[i][5]+'"\n' +
                                '                                           target="_blank" rel="noopener noreferrer">'+dataobj[i][1]+'</a></li>\n' +
                                '                                    <div class="source">['+dataobj[i][3]+']</div>\n' +
                                '                                </div>\n' +
                                '                                <div class="secondRow">\n' +
                                '                                    <div class="author">作者：'+dataobj[i][2]+'</div>\n' +
                                '                                    <div class="time">'+dataobj[i][4]+'</div>\n' +
                                '                                </div>\n' +
                                '                            </div>')

                        }
                    }
                }
            });
        }
        function rendRiverGraph(mode){
           var didx =  29 - datevalue;
            var legenddata = [];
            var data = [];
            $.ajax({
                url: 'hot.crawler.v2/hot.crawler/'+mode+'/get_timeline_related_article_' + didx + '.json',
                async: false,
                type: 'GET',
                success: function (res) {
                    var lines = res.related_investigations.associate.lines;
                    console.log(lines);
                    if(lines.length>0){
                        for(var i = 0;i<10&&i<lines.length;i++){
                            legenddata.push(lines[i].name)
                            if(lines[i].data.length>0){
                                lines[i].data.forEach(function (item,index) {
                                    var tempArray = [];
                                    tempArray.push(item.name);
                                    tempArray.push(item.value);
                                    tempArray.push(lines[i].name)
                                    data.push(tempArray);
                                })
                            }
                        }
                    }
                }
            });

            var option = {

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(0,0,0,0.2)',
                            width: 1,
                            type: 'solid'
                        }
                    }
                },

                legend: {
                    // data: ['DQ', 'TY', 'SS', 'QG', 'SY', 'DD']
                    data:legenddata
                },

                singleAxis: {
                    top: 50,
                    bottom: 50,
                    // axisTick: {},
                    axisLabel: {
                        formatter: function (value, index) {
                            // 格式化成月/日，只在第一个刻度显示年份
                            //console.log(value);
                            var date = new Date(value);
                            return date.getFullYear();
                        },
                    },
                    type: 'time',
                    // axisPointer: {
                    //     animation: true,
                    //     label: {
                    //         show: true
                    //     }
                    // },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            opacity: 0.2
                        }
                    }
                },

                series: [
                    {
                        type: 'themeRiver',
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 20,
                                shadowColor: 'rgba(0, 0, 0, 0.8)'
                            }
                        },
                        label: {
                            show: false
                        },
                        data: data
                    }
                ]
            };

            //获取dom容器
            var myChart = echarts.init(document.getElementById('riverGraph'));
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        function rendtupu(mode,value){
            var colorList = [
                [
                '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
                '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
                '#1e90ff', '#ff6347', '#7b68ee', '#d0648a', '#ffd700',
                '#6b8e23', '#4ea397', '#3cb371', '#b8860b', '#7bd9a5'
            ],
                [
                    '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
                    '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
                    '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
                    '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
                ],
                [
                    '#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe',
                    '#bb60b2', '#433e7c', '#f47a75', '#009db2', '#024b51',
                    '#0780cf', '#765005', '#e75840', '#26ccd8', '#3685fe',
                    '#9977ef', '#f5616f', '#f7b13f', '#f9e264', '#50c48f'
                ]][2];
            var modecn = "";
            if(mode=="medical"){
                modecn="医疗";
            }else if(mode=="ai"){
                modecn="人工智能";
            }else if(mode=="enviroment"){
                modecn="环境";
            }else if(mode=="im"){
                modecn="智能制造";
            }else if(mode=="it"){
                modecn="信息技术";
            }else if(mode=="obor"){
                modecn="一带一路";
            }else if(mode=="resource"){
                modecn="能源";
            }else if(mode=="sb"){
                modecn="科技前沿";
            }
            console.log(modecn);
            var data = [{
                "name": modecn,
                "value":100,
                "symbolSize": 150,
                "x":"center",
                "y":"center",
                "draggable": false,
                "itemStyle": {
                    "normal": {
                        "shadowBlur": 100,
                        "shadowColor": colorList[0],
                        "color": colorList[0]
                    }
                }
            }];

            $.ajax({
                url: 'hot.crawler.v2/hot.crawler/'+mode+'/get_timeline_data_' + value + '.json',
                async: false,
                type: 'GET',
                success: function (res) {
                    var dataobj = res.data;
                    if(dataobj.length>0){
                        dataobj.forEach(function (item,index) {
                            var tempdata = {
                                "name": "",
                                "value":100,
                                "symbolSize": 0,
                                "draggable": false,
                                "itemStyle": {
                                    "normal": {
                                        "shadowBlur": 100,
                                        "shadowColor": colorList[0],
                                        "color": colorList[0]
                                    }
                                }
                            }
                            tempdata.name = item[1];
                            tempdata.value = item[2].toFixed(1);
                            tempdata.symbolSize = item[2]*3;
                            tempdata.itemStyle.normal.shadowColor = colorList[index+1];
                            tempdata.itemStyle.normal.color = colorList[index+1];

                            data.push(tempdata);
                        })
                    }

                }
            });

            var option = {
                // 图表标题
                title: {
                    show:false,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
                    text: '热点图谱',//主标题文本，'\n'指定换行
                    x: 'center',        // 水平安放位置，默认为左对齐，可选为：
                    // 'center' ¦ 'left' ¦ 'right'
                    // ¦ {number}（x坐标，单位px）
                    y: 'center',             // 垂直安放位置，默认为全图顶端，可选为：
                    // 'top' ¦ 'bottom' ¦ 'center'
                    // ¦ {number}（y坐标，单位px）
                    //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
                    backgroundColor: 'rgba(0,0,0,0)',
                    borderColor: '#ccc',    // 标题边框颜色
                    borderWidth: 0,         // 标题边框线宽，单位px，默认为0（无边框）
                    padding: 5,             // 标题内边距，单位px，默认各方向内边距为5，
                                            // 接受数组分别设定上右下左边距，同css
                    itemGap: 10,            // 主副标题纵向间隔，单位px，默认为10，
                    textStyle: {
                        fontSize: 18,
                        fontWeight: 'bolder',
                        color: '#333'        // 主标题文字颜色
                    },
                    subtextStyle: {
                        color: '#aaa'        // 副标题文字颜色
                    }
                },
                backgroundColor: '#fff',
                tooltip: {},
                animationDurationUpdate: function(idx) {
                    // 越往后的数据延迟越大
                    return idx * 100;
                },
                animationEasingUpdate: 'bounceIn',
                color: ['#fff', '#fff', '#fff'],
                series: [{
                    type: 'graph',
                    layout: 'force',
                    force: {
                        repulsion: 150,
                        edgeLength: 2
                    },
                    roam: true,
                    label: {
                        normal: {
                            show: true
                        }
                    },
                    top:0,
                    bottom:0,
                    width:1000,
                    height:350,
                    data: data
                }]
            };

            //获取dom容器
            var myChart = echarts.init(document.getElementById('tupudiv'));
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    </script>
</head>
<body>
<div id="root">
    <div class="ant-spin-nested-loading">
        <div class="ant-spin-container">
            <div class="App">
                <div class="main_header"><img src="./科学热点_files/banner2.b448c1e2.png" alt="">
                    <div class="searchBox">
<%--                        <select class="searchType" id="contryType">--%>
<%--                            <option value="0">国内</option>--%>
<%--                            <option value="1">海外</option>--%>
<%--                        </select>--%>
                        <div class="searchType searchTypeBorder" id="medcial-btn">医药</div>
                        <div class="searchType" id="enviroment-btn">环境</div>
                        <div class="searchType" id="ai-btn">人工智能</div>
                        <div class="searchType" id="resource-btn">能源</div>
                        <div class="searchType" id="im-btn">智能制造</div>
                        <div class="searchType" id="obor-btn">一带一路</div>
                        <div class="searchType" id="it-btn">信息技术</div>
                        <div class="searchType" id="sb-btn">科技前沿</div>
<%--                        <div class="boxs"><select class="boxs_left" name="topic_sel" id="topic_sel">--%>
<%--                            <option value="医药">医药</option>--%>
<%--                            <option value="环境">环境</option>--%>
<%--                            <option value="人工智能">人工智能</option>--%>
<%--                            <option value="能源">能源</option>--%>
<%--                            <option value="智能制造">智能制造</option>--%>
<%--                            <option value="一带一路">一带一路</option>--%>
<%--                            <option value="信息技术">信息技术</option>--%>
<%--                            <option value="科技前沿">科技前沿</option>--%>
<%--                        </select><input type="text" placeholder="请输入关键词..." id="keywords_sel" value=""><img--%>
<%--                                src=""--%>
<%--                                alt="" class="searchIcon" id="search_btn">--%>
<%--                            <div class="serachResult" style="display: none;">--%>
<%--                                <div style="display: none;">您搜索的“”没有最新的新闻、资讯热点，帮您找到一些最近发生的热点关键词：</div>--%>
<%--                                <div style="display: block;">您搜索的“”已归属于当前热点图谱范围中</div>--%>
<%--                            </div>--%>
<%--                        </div>--%>
                    </div>
                </div>
                <div class="page_tab">
                    <ul>
                        <li class="tab1 tab1_active" data-index="1">热点图谱</li>
<%--                        <li class="tab2" data-index="2">技术路径</li>--%>
                    </ul>
<%--                    <img src=""--%>
<%--                         class="pushImg" alt=""></div>--%>
                <div id="capture">
                    <div class="tabBox" style="height: 670px">
                        <div class="tabBox_title"><span>热点图谱</span>
                            <img src="" class="help_icon" alt="">
                            <div class="flexWidth"></div>
<%--                            <button class="uploadBg" id="uploadBg"><i class="iconfont icon-xiazai"></i>生成报告</button>--%>
                            <div class="help_text" style="display: none;">数据说明：每个专题领域下一周中的新闻热点<br>算法说明：热词距圆心的距离表示热词与专题领域的相关性强度;<br><span
                                    class="visiable">算法说明：</span>热词自身大小表示热词热度指数的大小，红色代表热度趋势上升，绿色代表热度趋势下降。
                            </div>
                        </div>
                        <div class="topic_echarts">
                            <div class="show_time" id="timelabel1"></div>
                            <div class="legend"><span class="legend_text">热度指数：</span><span
                                    class="legend_1"></span><span class="legend_2"></span><span class="legend_3"></span>

<%--                                <span--%>
<%--                                        class="legend_text">热点趋势：</span><span class="legend_up"></span>上升<span--%>
<%--                                        class="legend_down"></span>下降--%>
                            </div>

<%--                            <img src="./科学热点_files/echart_bg.e98c5908.png" class="echart_bg" alt="">--%>
                            <div style="height: 600px;">
                                <div id="tupudiv" style="position:relative;top:50px;width: 1137px;height:350px;"><div>
                            </div>
                        </div>
<%--                        <div id="slide" style="width: 80%;margin-bottom: 20px;"></div>--%>
                    </div>

                    <div>
                        <div id="slide" style="width: 80%;position:absolute;top:520px;left:105px;"></div>
                        <div style="font-size: 10px;">
                            <span style="position:absolute;top:545px;left:210px;" id="dt4"></span>
                            <span style="position:absolute;top:545px;left:375px;" id="dt9"></span>
                            <span style="position:absolute;top:545px;left:540px;" id="dt14"></span>
                            <span style="position:absolute;top:545px;left:705px;" id="dt19"></span>
                            <span style="position:absolute;top:545px;left:870px;" id="dt24"></span>
                            <span style="position:absolute;top:545px;left:1035px;" id="dt29"></span>
                        </div>
                    </div>

                    <div class="hotword_trend_box hide">
                        <div id="hotword_trend"></div>
                        <img src=""
                             alt="" class="closeImg"></div>
                    <div class="techWrap">
                        <div class="techBox">
                            <div class="techBox_header"><span class="title">热点排行</span><span class="time" id="timelabel2">2020-11-02 至 2020-11-09</span>
                            </div>
                            <div class="hot_table">
                                <table>
                                    <thead>
                                    <tr>
                                        <th class="thWidth1">排名</th>
                                        <th class="thWidth2">热词</th>
                                        <th class="thWidth3">热度指数</th>
                                    </tr>
                                    </thead>
                                    <tbody id="redianpaihang">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="techBox">
                            <div id="knowledge" style="display: none;"></div>
                            <div class="techBox_header"><span class="title">热点新闻排行</span><span class="time" id="timelabel3">2020-11-02 至 2020-11-09</span>
<%--                                <span class="article_more">更多</span>--%>
                            </div>
                            <div class="hot_table">
                                <table>
                                    <thead>
                                    <tr>
                                        <th class="thW2-1">排名</th>
                                        <th class="thW2-2">新闻标题</th>
                                        <th class="thW2-3">媒体</th>
                                        <th class="thW2-3">发布时间</th>
                                    </tr>
                                    </thead>
                                    <tbody id="redianxinwen">

                                    </tbody>
                                </table>
                            </div>
                        </div>
<%--                        <div class="techBox techBox2">--%>
<%--                            <div class="techBox_header"><span class="title">相关专利</span>--%>
<%--&lt;%&ndash;                                <span class="article_more">更多</span>&ndash;%&gt;--%>
<%--                            </div>--%>
<%--                            <div id="patentList">--%>

<%--                            </div>--%>
<%--                        </div>--%>
                        <div class="techBox techBox3">
                            <div class="techBox_header"><span class="title">相关院士专家</span></div>
                            <div class="personBox" id="expertList">

                            </div>
                        </div>
<%--                        <div class="techBox techBox3">--%>
<%--                            <div class="techBox_header"><span class="title">相关论文</span>--%>
<%--&lt;%&ndash;                                <span class="article_more">更多</span>&ndash;%&gt;--%>
<%--                            </div>--%>
<%--                            <div id="articleList">--%>

<%--                            </div>--%>
<%--                        </div>--%>
                        <div class="techBox techBox3">
                            <div class="techBox_header"><span class="title">关联研究</span></div>
                            <div class="investigation_description">
                                <div>共有<span>10</span>个研究点与'<span class="red" id="relatedtext">医药</span>'相关，共发表多篇论文，以下是相关研究趋势</div>
                            </div>
                            <div id="investigation_chart" _echarts_instance_="ec_1604918057427"
                                 style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
                                <div style="position: relative; width: 570px; height: 450px; padding: 0px; margin: 0px; border-width: 0px;" id="riverGraph">

                                </div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<iframe id="iframeC" src="./科学热点_files/saved_resource.html" width="0" height="0" style="display:none"></iframe>
<script>!function (l) {
    function e(e) {
        for (var r, t, n = e[0], o = e[1], u = e[2], f = 0, i = []; f < n.length; f++) t = n[f], p[t] && i.push(p[t][0]), p[t] = 0;
        for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (l[r] = o[r]);
        for (s && s(e); i.length;) i.shift()();
        return c.push.apply(c, u || []), a()
    }

    function a() {
        for (var e, r = 0; r < c.length; r++) {
            for (var t = c[r], n = !0, o = 1; o < t.length; o++) {
                var u = t[o];
                0 !== p[u] && (n = !1)
            }
            n && (c.splice(r--, 1), e = f(f.s = t[0]))
        }
        return e
    }

    var t = {}, p = {1: 0}, c = [];

    function f(e) {
        if (t[e]) return t[e].exports;
        var r = t[e] = {i: e, l: !1, exports: {}};
        return l[e].call(r.exports, r, r.exports, f), r.l = !0, r.exports
    }

    f.m = l, f.c = t, f.d = function (e, r, t) {
        f.o(e, r) || Object.defineProperty(e, r, {enumerable: !0, get: t})
    }, f.r = function (e) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(e, "__esModule", {value: !0})
    }, f.t = function (r, e) {
        if (1 & e && (r = f(r)), 8 & e) return r;
        if (4 & e && "object" == typeof r && r && r.__esModule) return r;
        var t = Object.create(null);
        if (f.r(t), Object.defineProperty(t, "default", {
            enumerable: !0,
            value: r
        }), 2 & e && "string" != typeof r) for (var n in r) f.d(t, n, function (e) {
            return r[e]
        }.bind(null, n));
        return t
    }, f.n = function (e) {
        var r = e && e.__esModule ? function () {
            return e.default
        } : function () {
            return e
        };
        return f.d(r, "a", r), r
    }, f.o = function (e, r) {
        return Object.prototype.hasOwnProperty.call(e, r)
    }, f.p = "./";
    var r = window.webpackJsonp = window.webpackJsonp || [], n = r.push.bind(r);
    r.push = e, r = r.slice();
    for (var o = 0; o < r.length; o++) e(r[o]);
    var s = n;
    a()
}([])</script>
</body>
</html>
